<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>【课程笔记】Udemy - Advanced CSS and Sass: Flexbox, Grid, Animations and More! | Von Brank</title><meta name="keywords" content="教程,课程笔记,Web开发,HTML/CSS"><meta name="author" content="Von Brank"><meta name="copyright" content="Von Brank"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="The most advanced and modern CSS course on the internet: master flexbox, CSS Grid, responsive design, and so much more.">
<meta property="og:type" content="article">
<meta property="og:title" content="【课程笔记】Udemy - Advanced CSS and Sass: Flexbox, Grid, Animations and More!">
<meta property="og:url" content="https://vonbrank.github.io/archives/udemy-note-advanced-css-and-sass/index.html">
<meta property="og:site_name" content="Von Brank">
<meta property="og:description" content="The most advanced and modern CSS course on the internet: master flexbox, CSS Grid, responsive design, and so much more.">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://s2.loli.net/2022/01/07/AKhDvulVjkErmXS.jpg">
<meta property="article:published_time" content="2022-01-07T12:44:32.000Z">
<meta property="article:modified_time" content="2022-05-17T05:59:38.868Z">
<meta property="article:author" content="Von Brank">
<meta property="article:tag" content="教程">
<meta property="article:tag" content="课程笔记">
<meta property="article:tag" content="Web开发">
<meta property="article:tag" content="HTML&#x2F;CSS">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://s2.loli.net/2022/01/07/AKhDvulVjkErmXS.jpg"><link rel="shortcut icon" href="https://s2.loli.net/2022/01/08/s8FYlS5uPrtichT.jpg"><link rel="canonical" href="https://vonbrank.github.io/archives/udemy-note-advanced-css-and-sass/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: {"path":"search.xml","languages":{"hits_empty":"找不到您查询的内容：${query}"}},
  translate: {"defaultEncoding":2,"translateDelay":0,"msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"简"},
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '天',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: {"chs_to_cht":"你已切换为繁体","cht_to_chs":"你已切换为简体","day_to_night":"你已切换为深色模式","night_to_day":"你已切换为浅色模式","bgLight":"#49b1f5","bgDark":"#121212","position":"bottom-left"},
  source: {
    jQuery: 'https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js',
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css'
    },
    fancybox: {
      js: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js',
      css: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: true,
  isanchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: '【课程笔记】Udemy - Advanced CSS and Sass: Flexbox, Grid, Animations and More!',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2022-05-17 13:59:38'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          const now = new Date()
          const hour = now.getHours()
          const isNight = hour <= 6 || hour >= 18
          if (t === undefined) isNight ? activateDarkMode() : activateLightMode()
          else if (t === 'light') activateLightMode()
          else activateDarkMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const detectApple = () => {
      if (GLOBAL_CONFIG_SITE.isHome && /iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><meta name="generator" content="Hexo 5.4.0"><link rel="alternate" href="/atom.xml" title="Von Brank" type="application/atom+xml">
</head><body><div id="loading-box"><div class="loading-left-bg"></div><div class="loading-right-bg"></div><div class="spinner-box"><div class="configure-border-1"><div class="configure-core"></div></div><div class="configure-border-2"><div class="configure-core"></div></div><div class="loading-word">加载中...</div></div></div><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "" data-lazy-src="https://s2.loli.net/2022/01/08/s8FYlS5uPrtichT.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="site-data"><div class="data-item is-center"><div class="data-item-link"><a href="/archives/"><div class="headline">文章</div><div class="length-num">46</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/tags/"><div class="headline">标签</div><div class="length-num">25</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/categories/"><div class="headline">分类</div><div class="length-num">19</div></a></div></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="/comments/"><i class="fa-fw fas fa-comments"></i><span> 评论</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fas fa-tools"></i><span> 工具</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="https://vonbrank.github.io/hit-introduction-to-discrete-mathematics/"><i class="fa-fw fas fa-less-than-equal"></i><span> 《离散数学引论》答案补充</span></a></li><li><a class="site-page child" href="https://vonbrank.github.io/my-tech-companies-website/"><i class="fa-fw fas fa-server"></i><span> 科技公司网页模仿</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://s2.loli.net/2022/01/07/AKhDvulVjkErmXS.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Von Brank</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="/comments/"><i class="fa-fw fas fa-comments"></i><span> 评论</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fas fa-tools"></i><span> 工具</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="https://vonbrank.github.io/hit-introduction-to-discrete-mathematics/"><i class="fa-fw fas fa-less-than-equal"></i><span> 《离散数学引论》答案补充</span></a></li><li><a class="site-page child" href="https://vonbrank.github.io/my-tech-companies-website/"><i class="fa-fw fas fa-server"></i><span> 科技公司网页模仿</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">【课程笔记】Udemy - Advanced CSS and Sass: Flexbox, Grid, Animations and More!</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-01-07T12:44:32.000Z" title="发表于 2022-01-07 20:44:32">2022-01-07</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2022-05-17T05:59:38.868Z" title="更新于 2022-05-17 13:59:38">2022-05-17</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/HTML-CSS/">HTML/CSS</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">1.6k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>6分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="【课程笔记】Udemy - Advanced CSS and Sass: Flexbox, Grid, Animations and More!"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h2 id="CSS-幕后解析">CSS 幕后解析</h2>
<h3 id="概述">概述</h3>
<h3 id="层叠与优先级">层叠与优先级</h3>
<h3 id="数值处理">数值处理</h3>
<h3 id="继承">继承</h3>
<h3 id="盒模型">盒模型</h3>
<h3 id="架构、组件与-BEM-命名法">架构、组件与 BEM 命名法</h3>
<p>项目的可维护性与可扩展性应满足这些要求：</p>
<ul>
<li>干净</li>
<li>模块化</li>
<li>可重用</li>
<li>可扩展</li>
</ul>
<p>具体来说，工作流应呈现以下形态：</p>
<ol>
<li>THINK</li>
<li>BUILD</li>
<li>ARCHITECT</li>
</ol>
<h4 id="THINK-布局与组件设计">THINK | 布局与组件设计</h4>
<h4 id="BUILD-使用-BEM-命名法">BUILD | 使用 BEM 命名法</h4>
<h4 id="ARCHITECT-使用-7-1-设计模式">ARCHITECT | 使用 7-1 设计模式</h4>
<p>7-1 设计模式为基于 CSS 预处理器（后面的章节将介绍 SASS 预处理器）的前端设计提供了一种文件布局思路，目的在于提升代码的可重用性、可维护性可扩展性。</p>
<p>具体来说，所有 Sass 文件均放在 <code>sass/</code> 目录内，其中包含：</p>
<ul>
<li><strong>7</strong> 个子文件夹，用于定义各类组件。</li>
<li><strong>1</strong> 个 <code>main.scss</code> 文件用于导入与组织 7 个文件夹内的组件，并编译成最终的 <code>css/style.css</code> 文件。</li>
</ul>
<p>这 <strong>7</strong> 个文件夹的名称和功能分别为：</p>
<ul>
<li><code>base/</code><br>
定义页面的基本元素属性，如：
<ul>
<li><code>_base.scss</code>：定义 <code>html</code>、<code>body</code>等元素的基本属性，响应式设计的设置等。</li>
<li><code>_typography.scss</code>：定义排版、标题的样式。</li>
<li><code>_utilities.scss</code>：各种工具类，如 <code>margin-bottom-sm</code>、<code>grid-vertical-center</code> 等。</li>
</ul>
</li>
<li><code>components/</code><br>
定义各类原子组件的样式等，如：
<ul>
<li><code>_btn.scss</code>：页面按钮样式。</li>
</ul>
</li>
<li><code>layout/</code><br>
定义页面的布局设置：
<ul>
<li><code>_grid.scss</code>：网格系统。</li>
</ul>
</li>
<li><code>pages/</code><br>
针对每个页面各自布局的特化设置：
<ul>
<li><code>_home.scss</code>：主页。</li>
</ul>
</li>
<li><code>themes/</code></li>
<li><code>abstracts/</code><br>
包含各类常量与可重用样式：
<ul>
<li><code>variables</code>：颜色，字体，间隔设置等。</li>
<li><code>mixins</code>：各种 <code>mixins</code> 的定义。</li>
<li><code>functions</code>：各种 <code>functions</code> 的定义。</li>
</ul>
</li>
<li><code>vendors/</code><br>
包含可能用到的外部库。</li>
</ul>
<h2 id="SASS-与-NPM-简介">SASS 与 NPM 简介</h2>
<h3 id="SASS-预处理器">SASS 预处理器</h3>
<p>SASS 是一种 CSS 预处理器，即对原生 CSS 语法进行扩展，使之具备比 CSS 更强的表达能力，然后编译成标准 CSS ，便于写出简洁明了、可维护性与可扩展性更强的代码。</p>
<h4 id="变量与嵌套">变量与嵌套</h4>
<p>重复出现的值可以通过变量来定义：</p>
<ul>
<li>SCSS：  <figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable">$color-primary</span>: <span class="number">#f9ed69</span>;</span><br><span class="line"><span class="selector-class">.navigation</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="variable">$color-primary</span>;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">list-style</span>: none;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li>CSS：  <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.navigation</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#f9ed69</span>;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">list-style</span>: none;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
</ul>
<p>选择器可以嵌套：</p>
<ul>
<li>SCSS：  <figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.navigation</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">list-style</span>: none;</span><br><span class="line">  <span class="selector-tag">li</span> &#123;</span><br><span class="line">    <span class="attribute">text-decoration</span>: none;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li>CSS：  <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.navigation</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">list-style</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.navigation</span> <span class="selector-tag">li</span> &#123;</span><br><span class="line">  <span class="attribute">text-decoration</span>: none;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
</ul>
<h4 id="Mixin、Extend-与-Function">Mixin、Extend 与 Function</h4>
<p>Mixin 将可重用的若干属性封装在特定代码块内，可用 <code>@include</code> 调用：</p>
<ul>
<li>SCSS：  <figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@mixin</span> absCenter &#123;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">transform</span>: translate(-<span class="number">50%</span>, -<span class="number">50%</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.heading-primary</span> &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">5.2rem</span>;</span><br><span class="line">  <span class="attribute">letter-spacing</span>: -<span class="number">0.2rem</span>;</span><br><span class="line">  <span class="keyword">@include</span> absCenter;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li>CSS：  <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.heading-primary</span> &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">5.2rem</span>;</span><br><span class="line">  <span class="attribute">letter-spacing</span>: -<span class="number">0.2rem</span>;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translate</span>(-<span class="number">50%</span>, -<span class="number">50%</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
</ul>
<p>Extend 同样用于封装代码，与 Mixin 不同之处在于，其声明名称被替换为 使用 <code>@extend</code> 引用处的选择器，便于设置多个类的共有默认属性，同时避免覆盖各自的客制化属性设置：</p>
<ul>
<li>SCSS：  <figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable">$color-primary</span>: <span class="number">#f9ed69</span>;</span><br><span class="line"><span class="variable">$color-secondary</span>: <span class="number">#f08a5d</span>;</span><br><span class="line"></span><br><span class="line">%btn--placeholder &#123;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">1.2rem</span> <span class="number">2.4rem</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">100rem</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.btn--main</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="variable">$color-primary</span>;</span><br><span class="line">  <span class="keyword">@extend</span> %btn--placeholder;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.btn--sub</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="variable">$color-secondary</span>;</span><br><span class="line">  <span class="keyword">@extend</span> %btn--placeholder;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li>CSS：  <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.btn--sub</span>, <span class="selector-class">.btn--main</span> &#123;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">1.2rem</span> <span class="number">2.4rem</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">100rem</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.btn--main</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#f9ed69</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.btn--sub</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#f08a5d</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
</ul>
<p>SASS 可以定义和使用函数：</p>
<ul>
<li>SCSS:  <figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@function</span> divide(<span class="variable">$a</span>, <span class="variable">$b</span>) &#123;</span><br><span class="line">  <span class="keyword">@return</span> <span class="variable">$a</span> / <span class="variable">$b</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">nav</span> &#123;</span><br><span class="line">  <span class="attribute">margin</span>: divide(<span class="number">60</span>, <span class="number">2</span>) * <span class="number">1px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li>CSS:  <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">nav</span> &#123;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">30px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
</ul>
<p>Minix 中亦可以使用变量：</p>
<ul>
<li>SCSS：  <figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable">$color-primary</span>: <span class="number">#f9ed69</span>;</span><br><span class="line"><span class="keyword">@mixin</span> style-link-text(<span class="variable">$color</span>) &#123;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">1.2rem</span> <span class="number">2.4rem</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="variable">$color</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">100rem</span>;</span><br><span class="line">  <span class="attribute">display</span>: inline-block;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">a</span> &#123;</span><br><span class="line">  <span class="attribute">text-decoration</span>: none;</span><br><span class="line">  <span class="keyword">@include</span> style-link-text(<span class="variable">$color-primary</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li>CSS：  <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">a</span> &#123;</span><br><span class="line">  <span class="attribute">text-decoration</span>: none;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">1.2rem</span> <span class="number">2.4rem</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#f9ed69</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">100rem</span>;</span><br><span class="line">  <span class="attribute">display</span>: inline-block;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="NPM-包管理器">NPM 包管理器</h3>
<h4 id="安装-Node-js">安装 Node.js</h4>
<ul>
<li>
<p>直接去<a target="_blank" rel="noopener" href="https://nodejs.org/zh-cn/download/">官网</a>下载安装包安装，或者使用 <a target="_blank" rel="noopener" href="https://github.com/coreybutler/nvm-windows/releases">NVM</a> 创建虚拟 Node.js 环境即可。</p>
</li>
<li>
<p>安装完成后注意环境变量设置，并检查一下环境：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">node -v</span><br></pre></td></tr></table></figure>
</li>
</ul>
<h4 id="使用-NPM-配置-SASS-环境">使用 NPM 配置 SASS 环境</h4>
<ul>
<li>
<p>初始化 Node.js 环境：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm init</span><br></pre></td></tr></table></figure>
<p>根据提示配置参数即可。</p>
</li>
<li>
<p>安装 <code>node-sass</code> 预处理器：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install node-sass --save-dev</span><br></pre></td></tr></table></figure>
<p>由于这是在开发环境下使用 <code>node-sass</code> ，当工作环境迁移时，我们不可能将生成的 <code>node_modules</code> 一并拷贝或加入 <code>commit</code>，因此我们需要添加 <code>--save-dev</code> 参数，将 <code>node-sass</code> 添加为依赖项，之后在其他设备上进行开发时，只需要输入：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install node-sass --save-dev</span><br></pre></td></tr></table></figure>
<p>即可从 <code>npm</code> 镜像源安装所有依赖项。</p>
</li>
<li>
<p>添加 SCSS 编译脚本</p>
<p>在 <code>package.json</code> 里找到 <code>&quot;scripts&quot;</code> 字段，修改成如下形式：</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&quot;scripts&quot;: &#123;</span><br><span class="line">    &quot;test&quot;: &quot;echo \&quot;Error: no test specified\&quot; &amp;&amp; exit 1&quot;,</span><br><span class="line">    &quot;compile:sass&quot;: &quot;node-sass sass/main.scss css/style.css -w&quot;</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
<p>此处定义了一个 <code>complie:sass</code> 脚本，你可以通过：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm run compile:sass</span><br></pre></td></tr></table></figure>
<p>来运行此脚本。<code>sass/main.scss</code> 与 <code>css/style.css</code> 分别是编译的源文件和目标文件。 <code>-w</code> 参数用于监听 SASS 组件的更新情况，每次更新 <code>.scss</code> 文件都会重新编译。</p>
</li>
</ul>
<h2 id="float-clearfix-hack-布局"><code>float-clearfix hack</code> 布局</h2>
<h2 id="flex-布局"><code>flex</code> 布局</h2>
<h2 id="grid-布局"><code>grid</code> 布局</h2>
<h2 id="响应式设计">响应式设计</h2>
<h3 id="先决条件">先决条件</h3>
<p>SASS 中的 <code>@media</code> 也可以嵌套：</p>
<ul>
<li>SCSS：  <figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">html</span> &#123;</span><br><span class="line">  <span class="keyword">@media</span> (<span class="attribute">max-width</span>: <span class="number">1200px</span>) &#123;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">62.5%</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li>CSS：  <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@media</span> (<span class="attribute">max-width</span>: <span class="number">1200px</span>) &#123;</span><br><span class="line">  <span class="selector-tag">html</span> &#123;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">62.5%</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
</ul>
<p>使用 <code>@include</code> 调用 Mixin 代码块时， <code>@content</code> 将被替换成调用处的代码块：</p>
<ul>
<li>SCSS：  <figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@mixin</span> respond-phone &#123;</span><br><span class="line">  <span class="keyword">@media</span> (<span class="attribute">max-width</span>: <span class="number">600px</span>) &#123; <span class="keyword">@content</span> &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">html &#123;</span><br><span class="line">  <span class="keyword">@include</span> respond-phone &#123;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">50%</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li>CSS：  <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@media</span> (<span class="attribute">max-width</span>: <span class="number">600px</span>) &#123;</span><br><span class="line">  <span class="selector-tag">html</span> &#123;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">50%</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
</ul>
<p><code>if</code> 语句用于选择性替换内容：</p>
<ul>
<li>SCSS：  <figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@mixin</span> respond(<span class="variable">$breakpoint</span>) &#123;</span><br><span class="line">    if $breakpoint == phone &#123;</span><br><span class="line">        <span class="attribute">font-size</span>: <span class="number">50%</span>;</span><br><span class="line">    &#125;</span><br><span class="line">  </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">html</span> &#123;</span><br><span class="line">  <span class="keyword">@include</span> respond(phone);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li>CSS：  <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">html</span> &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">50%</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
</ul>
<h4 id="使用-SASS-快速实现响应式设计">使用 SASS 快速实现响应式设计</h4>
<p>在 <code>abstracts/mixins</code> 内声明：</p>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">phone: 0 ~ 600px</span></span><br><span class="line"><span class="comment">tab-port: 600px ~ 900px</span></span><br><span class="line"><span class="comment">tab-land: 900px ~ 1200px</span></span><br><span class="line"><span class="comment">desktop(default): 1200px ~ 1800px</span></span><br><span class="line"><span class="comment">big-desktop: 1800px ~ infinity</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">@mixin</span> respond(<span class="variable">$breakpoint</span>) &#123;</span><br><span class="line">    <span class="keyword">@if</span> <span class="variable">$breakpoint</span> == phone &#123;</span><br><span class="line">        <span class="keyword">@media</span> (<span class="attribute">max-width</span>: <span class="number">37.5em</span>) &#123; <span class="keyword">@content</span> &#125;	//<span class="number">37.5em</span> = <span class="number">600px</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">@if</span> <span class="variable">$breakpoint</span> == tab-port &#123;</span><br><span class="line">        <span class="keyword">@media</span> (<span class="attribute">max-width</span>: <span class="number">56.25em</span>) &#123; <span class="keyword">@content</span> &#125;//<span class="number">56.25em</span> = <span class="number">900px</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">@if</span> <span class="variable">$breakpoint</span> == tab-land &#123;</span><br><span class="line">        <span class="keyword">@media</span> (<span class="attribute">max-width</span>: <span class="number">75em</span>) &#123; <span class="keyword">@content</span> &#125;	//<span class="number">75em</span> = <span class="number">1200px</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">@if</span> <span class="variable">$breakpoint</span> == big-desktop &#123;</span><br><span class="line">        <span class="keyword">@media</span> (<span class="attribute">min-width</span>: <span class="number">112.5em</span>) &#123; <span class="keyword">@content</span> &#125;//<span class="number">112.5em</span> = <span class="number">1800px</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>以选中 <code>html</code> 元素并响应式地设置 <code>font-size</code> 为例：</p>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">html</span> &#123;</span><br><span class="line">    <span class="comment">// define what 1rem is</span></span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">62.5%</span>;	<span class="comment">//1rem = 16px * 62.5% = 10px</span></span><br><span class="line">    </span><br><span class="line">    <span class="keyword">@include</span> respond(phone) &#123;</span><br><span class="line">        <span class="attribute">font-size</span>: <span class="number">37.5%</span>	//<span class="number">1rem</span> = <span class="number">16px</span> * <span class="number">37.5%</span> = <span class="number">6px</span></span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    @include respond(tab-port) &#123;</span><br><span class="line">        font-size: <span class="number">50%</span>;	<span class="comment">//1rem = 16px * 50% = 8px</span></span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="keyword">@include</span> respond(tab-land) &#123;</span><br><span class="line">        <span class="attribute">font-size</span>: <span class="number">56.25%</span>	//<span class="number">1rem</span> = <span class="number">16px</span> * <span class="number">56.25%</span> = <span class="number">9px</span></span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    @include respond(big-desktop) &#123;</span><br><span class="line">        font-size: <span class="number">75%</span>		//<span class="number">1rem</span> = <span class="number">16px</span> * <span class="number">75%</span> = <span class="number">12px</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="其他常用技巧">其他常用技巧</h2>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="mailto:undefined">Von Brank</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://vonbrank.github.io/archives/udemy-note-advanced-css-and-sass/">https://vonbrank.github.io/archives/udemy-note-advanced-css-and-sass/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://vonbrank.github.io" target="_blank">Von Brank</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E6%95%99%E7%A8%8B/">教程</a><a class="post-meta__tags" href="/tags/%E8%AF%BE%E7%A8%8B%E7%AC%94%E8%AE%B0/">课程笔记</a><a class="post-meta__tags" href="/tags/Web%E5%BC%80%E5%8F%91/">Web开发</a><a class="post-meta__tags" href="/tags/HTML-CSS/">HTML/CSS</a></div><div class="post_share"><div class="social-share" data-image="https://s2.loli.net/2022/01/07/AKhDvulVjkErmXS.jpg" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share.js/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/social-share.js/dist/js/social-share.min.js" defer></script></div></div><div class="post-reward"><div class="reward-button button--animated"><i class="fas fa-qrcode"></i> 打赏</div><div class="reward-main"><ul class="reward-all"><li class="reward-item"><a href="/img/wechat.png" target="_blank"><img class="post-qr-code-img" src= "" data-lazy-src="/img/wechat.png" alt="WeChat"/></a><div class="post-qr-code-desc">WeChat</div></li><li class="reward-item"><a href="/img/alipay.jpg" target="_blank"><img class="post-qr-code-img" src= "" data-lazy-src="/img/alipay.jpg" alt="AliPay"/></a><div class="post-qr-code-desc">AliPay</div></li></ul></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/archives/udemy-note-the-complete-javascript-course/"><img class="prev-cover" src= "" data-lazy-src="https://s2.loli.net/2022/01/07/IpZeyLJzvVwbO7A.jpg" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">【课程笔记】Udemy - The Complete JavaScript Course 2022: From Zero to Expert!</div></div></a></div><div class="next-post pull-right"><a href="/archives/udemy-note-build-responsive-real-world-websites-with-html-and-css/"><img class="next-cover" src= "" data-lazy-src="https://s2.loli.net/2022/01/07/8O5MjcQI7peF6CK.jpg" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">【课程笔记】Udemy - Build Responsive Real-World Websites with HTML and CSS</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/archives/udemy-note-build-responsive-real-world-websites-with-html-and-css/" title="【课程笔记】Udemy - Build Responsive Real-World Websites with HTML and CSS"><img class="cover" src= "" data-lazy-src="https://s2.loli.net/2022/01/07/8O5MjcQI7peF6CK.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-01-05</div><div class="title">【课程笔记】Udemy - Build Responsive Real-World Websites with HTML and CSS</div></div></a></div><div><a href="/archives/udemy-note-the-complete-javascript-course/" title="【课程笔记】Udemy - The Complete JavaScript Course 2022: From Zero to Expert!"><img class="cover" src= "" data-lazy-src="https://s2.loli.net/2022/01/07/IpZeyLJzvVwbO7A.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-01-08</div><div class="title">【课程笔记】Udemy - The Complete JavaScript Course 2022: From Zero to Expert!</div></div></a></div><div><a href="/archives/hit-cs31106-explanation-01/" title="C语言答疑-01"><img class="cover" src= "" data-lazy-src="https://s2.loli.net/2022/01/08/aHnR1gNZI75hTd2.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-10-28</div><div class="title">C语言答疑-01</div></div></a></div><div><a href="/archives/hit-cs31106-explanation-04/" title="C语言答疑-04"><img class="cover" src= "" data-lazy-src="https://s2.loli.net/2022/01/08/aHnR1gNZI75hTd2.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-11-23</div><div class="title">C语言答疑-04</div></div></a></div><div><a href="/archives/hit-software-construction-lab1-config/" title="HIT-软件构造 | Lab1 项目配置"><img class="cover" src= "" data-lazy-src="https://s2.loli.net/2022/05/01/pZiMB5ED7aHY3G4.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-04-29</div><div class="title">HIT-软件构造 | Lab1 项目配置</div></div></a></div><div><a href="/archives/hit-cs31106-explanation-02/" title="C语言答疑-02"><img class="cover" src= "" data-lazy-src="https://s2.loli.net/2022/01/08/aHnR1gNZI75hTd2.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-11-07</div><div class="title">C语言答疑-02</div></div></a></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src= "" data-lazy-src="https://s2.loli.net/2022/01/08/s8FYlS5uPrtichT.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Von Brank</div><div class="author-info__description">Von Brank, a student from Harbin Institute of Technology, who likes coding, video editing, designing, gaming, and more.</div></div><div class="card-info-data"><div class="card-info-data-item is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">46</div></a></div><div class="card-info-data-item is-center"><a href="/tags/"><div class="headline">标签</div><div class="length-num">25</div></a></div><div class="card-info-data-item is-center"><a href="/categories/"><div class="headline">分类</div><div class="length-num">19</div></a></div></div><a class="button--animated" id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/vonbrank"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/vonbrank" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="mailto:vonbrank@outlook.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a><a class="social-icon" href="https://twitter.com/Von_Brank" target="_blank" title="Twitter"><i class="fab fa-twitter"></i></a><a class="social-icon" href="https://steamcommunity.com/id/vonbrank/" target="_blank" title="Steam"><i class="fab fa-steam"></i></a><a class="social-icon" href="/atom.xml" target="_blank" title="RSS"><i class="fas fa-rss"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn card-announcement-animation"></i><span>公告</span></div><div class="announcement_content">This is my Blog</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#CSS-%E5%B9%95%E5%90%8E%E8%A7%A3%E6%9E%90"><span class="toc-text">CSS 幕后解析</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A6%82%E8%BF%B0"><span class="toc-text">概述</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B1%82%E5%8F%A0%E4%B8%8E%E4%BC%98%E5%85%88%E7%BA%A7"><span class="toc-text">层叠与优先级</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E5%80%BC%E5%A4%84%E7%90%86"><span class="toc-text">数值处理</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%BB%A7%E6%89%BF"><span class="toc-text">继承</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%9B%92%E6%A8%A1%E5%9E%8B"><span class="toc-text">盒模型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%9E%B6%E6%9E%84%E3%80%81%E7%BB%84%E4%BB%B6%E4%B8%8E-BEM-%E5%91%BD%E5%90%8D%E6%B3%95"><span class="toc-text">架构、组件与 BEM 命名法</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#THINK-%E5%B8%83%E5%B1%80%E4%B8%8E%E7%BB%84%E4%BB%B6%E8%AE%BE%E8%AE%A1"><span class="toc-text">THINK | 布局与组件设计</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#BUILD-%E4%BD%BF%E7%94%A8-BEM-%E5%91%BD%E5%90%8D%E6%B3%95"><span class="toc-text">BUILD | 使用 BEM 命名法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#ARCHITECT-%E4%BD%BF%E7%94%A8-7-1-%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F"><span class="toc-text">ARCHITECT | 使用 7-1 设计模式</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#SASS-%E4%B8%8E-NPM-%E7%AE%80%E4%BB%8B"><span class="toc-text">SASS 与 NPM 简介</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#SASS-%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8"><span class="toc-text">SASS 预处理器</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%8F%98%E9%87%8F%E4%B8%8E%E5%B5%8C%E5%A5%97"><span class="toc-text">变量与嵌套</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Mixin%E3%80%81Extend-%E4%B8%8E-Function"><span class="toc-text">Mixin、Extend 与 Function</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#NPM-%E5%8C%85%E7%AE%A1%E7%90%86%E5%99%A8"><span class="toc-text">NPM 包管理器</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%AE%89%E8%A3%85-Node-js"><span class="toc-text">安装 Node.js</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8-NPM-%E9%85%8D%E7%BD%AE-SASS-%E7%8E%AF%E5%A2%83"><span class="toc-text">使用 NPM 配置 SASS 环境</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#float-clearfix-hack-%E5%B8%83%E5%B1%80"><span class="toc-text">float-clearfix hack 布局</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#flex-%E5%B8%83%E5%B1%80"><span class="toc-text">flex 布局</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#grid-%E5%B8%83%E5%B1%80"><span class="toc-text">grid 布局</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%93%8D%E5%BA%94%E5%BC%8F%E8%AE%BE%E8%AE%A1"><span class="toc-text">响应式设计</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%85%88%E5%86%B3%E6%9D%A1%E4%BB%B6"><span class="toc-text">先决条件</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8-SASS-%E5%BF%AB%E9%80%9F%E5%AE%9E%E7%8E%B0%E5%93%8D%E5%BA%94%E5%BC%8F%E8%AE%BE%E8%AE%A1"><span class="toc-text">使用 SASS 快速实现响应式设计</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%B6%E4%BB%96%E5%B8%B8%E7%94%A8%E6%8A%80%E5%B7%A7"><span class="toc-text">其他常用技巧</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/archives/hit-software-construction-lab1-config/" title="HIT-软件构造 | Lab1 项目配置"><img src= "" data-lazy-src="https://s2.loli.net/2022/05/01/pZiMB5ED7aHY3G4.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="HIT-软件构造 | Lab1 项目配置"/></a><div class="content"><a class="title" href="/archives/hit-software-construction-lab1-config/" title="HIT-软件构造 | Lab1 项目配置">HIT-软件构造 | Lab1 项目配置</a><time datetime="2022-04-29T09:37:16.000Z" title="发表于 2022-04-29 17:37:16">2022-04-29</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/archives/book-note-csapp/" title="【阅读笔记】深入理解计算机系统"><img src= "" data-lazy-src="https://s2.loli.net/2022/01/12/DuW9EMYc274VsvS.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="【阅读笔记】深入理解计算机系统"/></a><div class="content"><a class="title" href="/archives/book-note-csapp/" title="【阅读笔记】深入理解计算机系统">【阅读笔记】深入理解计算机系统</a><time datetime="2022-01-12T06:13:00.000Z" title="发表于 2022-01-12 14:13:00">2022-01-12</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/archives/udemy-note-the-complete-javascript-course/" title="【课程笔记】Udemy - The Complete JavaScript Course 2022: From Zero to Expert!"><img src= "" data-lazy-src="https://s2.loli.net/2022/01/07/IpZeyLJzvVwbO7A.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="【课程笔记】Udemy - The Complete JavaScript Course 2022: From Zero to Expert!"/></a><div class="content"><a class="title" href="/archives/udemy-note-the-complete-javascript-course/" title="【课程笔记】Udemy - The Complete JavaScript Course 2022: From Zero to Expert!">【课程笔记】Udemy - The Complete JavaScript Course 2022: From Zero to Expert!</a><time datetime="2022-01-07T16:13:32.000Z" title="发表于 2022-01-08 00:13:32">2022-01-08</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/archives/udemy-note-advanced-css-and-sass/" title="【课程笔记】Udemy - Advanced CSS and Sass: Flexbox, Grid, Animations and More!"><img src= "" data-lazy-src="https://s2.loli.net/2022/01/07/AKhDvulVjkErmXS.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="【课程笔记】Udemy - Advanced CSS and Sass: Flexbox, Grid, Animations and More!"/></a><div class="content"><a class="title" href="/archives/udemy-note-advanced-css-and-sass/" title="【课程笔记】Udemy - Advanced CSS and Sass: Flexbox, Grid, Animations and More!">【课程笔记】Udemy - Advanced CSS and Sass: Flexbox, Grid, Animations and More!</a><time datetime="2022-01-07T12:44:32.000Z" title="发表于 2022-01-07 20:44:32">2022-01-07</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/archives/udemy-note-build-responsive-real-world-websites-with-html-and-css/" title="【课程笔记】Udemy - Build Responsive Real-World Websites with HTML and CSS"><img src= "" data-lazy-src="https://s2.loli.net/2022/01/07/8O5MjcQI7peF6CK.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="【课程笔记】Udemy - Build Responsive Real-World Websites with HTML and CSS"/></a><div class="content"><a class="title" href="/archives/udemy-note-build-responsive-real-world-websites-with-html-and-css/" title="【课程笔记】Udemy - Build Responsive Real-World Websites with HTML and CSS">【课程笔记】Udemy - Build Responsive Real-World Websites with HTML and CSS</a><time datetime="2022-01-05T14:31:56.000Z" title="发表于 2022-01-05 22:31:56">2022-01-05</time></div></div></div></div></div></div></main><footer id="footer" style="background-image: url('https://s2.loli.net/2022/01/07/AKhDvulVjkErmXS.jpg')"><div id="footer-wrap"><div class="copyright">&copy;2021 - 2022 By Von Brank</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="translateLink" type="button" title="简繁转换">繁</button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><div class="search-dialog__title" id="local-search-title">本地搜索</div><div id="local-input-panel"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div></div><hr/><div id="local-search-results"></div><span class="search-close-button"><i class="fas fa-times"></i></span></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/tw_cn.js"></script><script src="https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js" type="module"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script src="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js"></script><script src="/js/search/local-search.js"></script><script>var preloader = {
  endLoading: () => {
    document.body.style.overflow = 'auto';
    document.getElementById('loading-box').classList.add("loaded")
  },
  initLoading: () => {
    document.body.style.overflow = '';
    document.getElementById('loading-box').classList.remove("loaded")

  }
}
window.addEventListener('load',preloader.endLoading())</script><div class="js-pjax"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css"><script src="https://cdn.jsdelivr.net/npm/katex-copytex@latest/dist/katex-copytex.min.js"></script><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/katex-copytex@latest/dist/katex-copytex.min.css"><script>(() => {
  document.querySelectorAll('#article-container span.katex-display').forEach(item => {
    btf.wrap(item, 'div', { class: 'katex-wrap'})
  })
})()</script></div><script id="canvas_nest" defer="defer" color="27, 129, 203" opacity="0.7" zIndex="-1" count="256" mobile="false" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-nest.min.js"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div></body></html>